<template>
  <div class="row">
    <div class="col">
      <table class="table">
        <tr>
          <td scope="col">子账号管理</td>
          <td scope="col">消费类别</td>
          <td scope="col">地区</td>
          <td scope="col">消费金额</td>
          <td scope="col">提交日期</td>
          <td scope="col">审核情况</td>
        </tr>
        <tbody class="word">
          <tr v-for="(v,i) in phIndex" :key="i">
            <td v-text="v.username"></td>
            <td v-text="v.phonenum"></td>
            <td v-text="v.address"></td>
            <td v-text="v.totalspend"></td>
            <td v-text="v.lastlogintime"></td>
            <td>
              <div class="shenhe">
                <button
                  v-if="v.usertype =='Tourist' "
                  class="btn btncolor"
                  type="button"
                  @click="shenhe(v)"
                >审核</button>
              </div>
              <div class="shenhe">
                <button v-if="v.usertype =='User' " disabled class="btn btngren" type="button">已审核</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        v-show="chnum"
        :total="chnum"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { asynccheckUser } from "../../../plugins/api.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      phIndex: [],
      chnum: 0
    };
  },
  computed: mapGetters(["getagentUser"]),
  watch: {
    getagentUser() {
      this.phIndex = this.jisuan(this.getagentUser);
      this.chnum = Math.ceil(this.getagentUser.length / 12) * 10;
    }
  },
  methods: {
    handleCurrentChange(a) {
      this.phIndex = [];
      for (let v = a * 12 - 12; v < a * 12; v++) {
        this.phIndex.push(this.getagentUser[v]);
        if (v + 1 === this.getagentUser.length) {
          return;
        }
      }
    },
    jisuan(data) {
      if (data.length <= 20) {
        return data;
      } else {
        let arr = [];
        for (let v = 0; v < 12; v++) {
          arr.push(data[v]);
        }
        return arr;
      }
    },
    shenhe(data) {
      this.$confirm(
        `是否审核用户id为${data.userid},用户名称为${data.username}`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(async () => {
        try {
          await asynccheckUser({
            uid: data.userid
          });
          this.$message({
            type: "success",
            message: "审核成功!"
          });
          this.$store.dispatch("actionagentUser");
        } catch (err) {
          this.$message({
            type: "info",
            message: "审核失败"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.table {
  text-align: center;
}
.shenhe {
  background: #2f81f1;
  color: #ffffff;
  border-radius: 10px;
}
.btn {
  color: #ffffff;
}
.table td {
  vertical-align: inherit;
}
</style>

